<template>
  <div>
    <Content title="文件管理" :subTitle="form.parentName" path="/fileMapping" v-loading="loading">
      <div slot="body">
        <div style="padding-left: 20px">
          <p style="font-size: 20px">文件上传</p>
          <el-upload
            class="upload-demo"
            ref="upload"
            action="http://upload.qiniup.com/"
            :before-upload="beforeUpload"
            :on-success="handelSuccess"
            :on-remove="handleRemove"
            :data="params"
            list-type="picture"
            :file-list="imgs"
            :multiple="true"
            accept="image/*">
            <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg / png文件</div>
          </el-upload>
        </div>
        <div style="padding: 15px">
          <router-link to="/fileMapping">
            <el-button plain round type="info" icon="el-icon-back">返回</el-button>
          </router-link>
        </div>
      </div>
    </Content>
  </div>
</template>

<script>
  import util from '../../utils/util'
  import {FileMapping} from '../../utils/resource'
  import Content from '../../components/Content.vue'
  import {mapState, mapActions} from 'vuex'
  import {showSaveResponse, validFieldExists, validateForm} from '../../utils/element-helper'

  export default {
    name: 'fileMappingDetail',
    components: {
      Content,
    },
    data() {
      return {
        loading: false,
        imgs: [],
        form: {},
        params: {
          token: "",
          key: ""
        },
      }
    },
    created() {
      this.loading = true
      this.form.parentId = this.$route.params.parent
      this.form.parentName = this.$route.params.parentName
      this.loadToken()
      this.loadImg()
      this.$nextTick(() => {
        this.loading = false
      })
    },
    computed: {},
    methods: {
      async loadToken() {
        let res = await FileMapping.uploadToken()
        this.params.token = res.data.data
      },
      async loadImg() {
        this.loading = true
        let res = await FileMapping.list({parent: this.form.parentId})
        this.imgs = res.data

        this.$nextTick(() => {
          this.loading = false
        })
      },
      beforeUpload(file) {
        let isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
          return false
        }
        let ext = file.name.substr(file.name.lastIndexOf('.') + 1)
        if (ext !== "jpg" && ext !== "jpeg" && ext !== "png") {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
          return false
        }
        this.params.key = util.shorten() + file.name.substr(file.name.lastIndexOf('.'))
        return true
      },
      async handleRemove(file, fileList) {
        FileMapping.del(file.id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      },
      async handelSuccess(response, file, fileList) {
        let item = {
          parent: this.form.parentId,
          name: file.name,
          mime: file.raw.type,
          size: file.size,
          hash: response.hash,
          key: response.key,
          ext: file.name.substr(file.name.lastIndexOf('.') + 1),
          folder: 0,
        }
        await FileMapping.save(item, "post")
        let total = fileList.length
        let succcessed = 0
        fileList.forEach(f => {
          if (f.status === "success" || f.id) {
            succcessed++
          }
        })
        if (total === succcessed) {
          this.handelComplete(fileList)
        }
      },
      handelComplete(fileList) {
        this.loadImg()
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .fileMapping-form {
    width: 90%;
  }

  .my-form-item {
    max-width: 700px;
  }

</style>
<style>
  .my-form-input {
    max-width: 330px;
  }

</style>
